<template>
  <div class="MyVueScroll">
    <RecycleScroller
      class="scroller"
      :items="props.dataInfo"
      :item-size="30"
      v-if="props.dataInfo"
    >
      <template v-slot="{ item }">
        <div class="item">
          <span>{{ item.title }}</span>
        </div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';

const props = defineProps({
  dataInfo: {
    type: [Array, Object],
    default: () => []
  }
})

interface mvs {
  items:Array<any>
}

const state = reactive<mvs>({
  items: []
})
</script>

<style scoped lang="scss">
.MyVueScroll {
  .scroller {
    height: 480px;
    overflow-y: auto;
    .item {
      height: 60px;
    }
  }
}
</style>